<!DOCTYPE html>
<html lang="en">
<head>
<title>用户评价</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/staticFile/images/userIndex/favicon.ico" />
<link type="text/css" rel="stylesheet" href="/staticFile/css/userIndex/common.css">
<style type="text/css">
.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.order-evaluation {width: 838px;background: #fff;z-index: 200;margin:-40px auto auto auto;padding:60px;}
.order-evaluation h4{font-size:18px;color:#333333;padding-bottom:20px;border-bottom:1px dashed #dbdbdb;}
.order-evaluation p{font-size:14px;color:#999;line-height:45px;margin-bottom:0;margin-top: -14px;}
.order-evaluation .order-evaluation-text{font-size:16px;color:#333;line-height:40px;padding-left:15px;background:#f3f3f3;margin-bottom:25px;margin-top:20px;}
.impression-list ul li{width:115px;height:43px;border:1px solid #e8e8e8;text-align: center;font-size:14px;line-height:43px;margin-right:27px;margin-bottom:25px;float:left;cursor: pointer;overflow: hidden;position:relative;}
.impression-list ul li.checked i{display: block;}
.impression-list ul li.checked{border:1px solid #e84c3d;color: #e84c3d;font-weight: bold;}
.order-evaluation-textarea{position:relative;width: 824px;height: 210px;}
.order-evaluation-textarea textarea{width:806px;height:178px;border:1px solid #e8e8e8;position:absolute;top:0;left:0;line-height:22px;padding:15px;color:#666;font-size: 16px;}
.order-evaluation-textarea span{position:absolute;bottom:10px;font-size:12px;color:#999;right:10px;}
.order-evaluation-textarea span em{color:#e84c3d;}
.order-evaluation>a{width:154px;height:48px;display: block;text-align: center;line-height:48px;background:#f36a5a;float:right;margin-top:20px;color:#fff;font-size:16px;font-weight: bolder;}
.impression-list ul li i {display: none;color: #e84c3d;position: absolute;right: -4px;bottom: -14px;font-size: 20px;}
.order-evaluation>a:hover{background: #e84c3d;}
.rate-grade-star li label,.con span{ font-size: 18px; margin-right: 20px; line-height: 23px;}
.rate-grade-star li span{display: inline-block; vertical-align: middle; cursor: pointer;}
.level{color:#e84c3d;font-size:16px;margin-left:15px;position: relative;top: 3px;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.contact-span{margin-top: 20px;display: block;}
.contact-content textarea{margin-left: -7px;}
.btn-feedback{margin-top: 10px;}
</style>
<![endif]-->
<script type="text/javascript" src="/staticFile/js/common/constant.js"></script>
<script type="text/javascript" src="/staticFile/js/common/commonUtil.js"></script>
<script type="text/javascript" src="/staticFile/js/common/getDictionaries.js"></script>
<script type="text/javascript" src="/staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/staticFile/js/common/simpleTipsUtil.js"></script>
</head>
<body>
<header id="pageHeader">
    <div class="row-top">
        <div class="main">
            <div class="wrapper top-logo">
                <a href="/">LGL</a>
            </div>
        </div>
    </div>
    <div class="menu-row">
        <div class="menu-bg">
            <div class="main">
                <nav class="indent-left">
                    <ul class="menu wrapper">
                        <li><a href="/">热门服务</a></li>
                        <li><a href="issueService.html">发布服务</a></li>
                        <li id="Myself">
                            <a href="userRegister.html" class="user-register">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册</a>
                            <a href="userLogin.html" class="user-login">登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </li>
                        <li><a href="joinUs.html">JOIN US</a></li>
                        <li><a href="commonProblems.html">常见问题</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
<div id="middleMain" class="order-evaluation clearfix">
    <h4>给对方的评价</h4>
    <p>请严肃认真对待此次评价哦,因为您的评价对我们真的真的非常重要！</p>
    <div class="rate-grade-star">
        <ul>
            <li data-default-index="0">
                <span>
                    <img><img><img><img><img>
                </span>
                <em class="level"></em>
            </li>
        </ul>
    </div>
    <div class="order-evaluation-text">
        乖，摸摸小脑袋，本次服务给您留下了什么印象呢？
    </div>
    <div class="impression-list">
        <ul class="clearfix"></ul>
    </div>
    <div class="order-evaluation-textarea">
        <textarea name="content" id="userRateText" onkeyup="wordsNumberDeal();" ></textarea>
        <span>还可以输入<em id="textCount">140</em>个字</span>
    </div>
    <a href="javascript:;" rel="external nofollow" id="submitUserRate">提交评价</a>
</div>
<!-- 页面尾部 -->
<div id="footer" class="footer">
    <div class="footer_info">
        <div class="footer-care-us" style="margin-left: 0px;">
            <strong>关注微信</strong><br/>
            <img src="/staticFile/images/userIndex/weChat.png" />
        </div>
        <div class="footer-about-us">
            <strong>关于九九</strong><br/>
            <a href="aboutUs.html">关于我们</a><br/>
            <a href="serviceAim.html">服务宗旨</a><br/>
            <a href="feedback.html">意见反馈</a>
        </div>
        <div class="footer-contact-us">
            <strong>联系我们</strong><br/>
        <span>
            客服电话：186-7078-7994<br />
            服务邮箱：ijobvip@163.com<br />
            公司地址：北京丰台区草桥东路
        </span>
        </div>
        <div class="footer-record" style="float: right;">
            京ICP备25697805号-4  京ICP证182661号  Copyright © 2015-2016
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
let xImgPath = '/staticFile/images/userIndex/', redStarNum = -1;
$('.rate-grade-star img').attr('src',xImgPath + 'x1.png');
/*
 * 根据index获取 str
 */
function byIndexLevel(i){
    if (i < 0 || i > 4){
        return '';
    }
    let rateTextArray = ['1分很不满意','2分不满意','3分一般','4分满意','5分很满意'];
    return rateTextArray[i];
}

$(".rate-grade-star img").hover(function(e) {
    let obj = $(this);
    let index = obj.index();
    if(index < (parseInt($(".rate-grade-star li").attr("data-default-index")) -1)){
        return;
    }
    let li = obj.closest("li");
    for (let i = 0; i < 5; i++) {
        let x = i <= index ? '2' : '1';
        li.find("img").eq(i).attr("src", xImgPath + 'x' + x + '.png');
    }
    $(".level").html(byIndexLevel(index));
}).mouseout(function (e) {
    let li = $(this).closest("li");
    for (let i = 0; i < 5; i++) {
        let x = i <= redStarNum ? '2' : '1';
        li.find("img").eq(i).attr("src", xImgPath + 'x' + x + '.png');
    }
    $(".level").html(byIndexLevel(redStarNum));
}).click(function (e) {
    let obj = $(this);
    let li = obj.closest("li");
    let index = obj.index();
    li.attr("data-default-index", index + 1);
    for (let i = 0; i < index; i ++){
        $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src",xImgPath + "x2.png");
    }
    redStarNum = index;
    $(".level").html(byIndexLevel(index));
});

$(function(){
    loadImpression();
    //印象
    $(".user-impression").click(function(){
        if($(this).hasClass('checked')){
            //当前为选中状态，需要取消
            $(this).removeClass('checked');
        }else{
            //当前未选中，需要增加选中
            $(this).addClass('checked');
        }
    });
    $("#submitUserRate").click(function(){
    	if(this.innerText == '正在提交...'){
    		return;
    	}
        let levelNum = 0, userImpression = '';//评价星级
    	$(".rate-grade-star img").each(function(){
	   		if($(this).attr('src').indexOf('x2.png') > 0){
	   			levelNum ++;
	   		}
		});
    	if(levelNum < 1){
    		alert('亲，您忘了评价等级了啦！');
    		return;
    	}
    	//评价印象
    	$(".user-impression").each(function(){
            if($(this).hasClass('checked')){
            	userImpression += $(this).attr('data-impression') + ',';
            }
        });
    	if(isNull(userImpression)){
    		alert('亲，经过此次服务，对方给您留下了什么印象呢？');
    		return;
    	}
    	userImpression = userImpression.substring(0,userImpression.length - 1);
    	//评价文字内容
        let wordsLength = $("#userRateText").val().length;
    	if(wordsLength < 5){
    		alert('亲，评价内容至少5个字噢！');
    		return;
    	}
    	var billNo = sessionStorage.getItem('userRateBillNo');
    	if(isNull(billNo)){
    		alert('亲，单号不能为空噢');
    		return;
    	}
        let rateIssueOrRob = sessionStorage.getItem('rateIssueOrRob');
    	if(isNull(rateIssueOrRob)){
    		alert('亲，很抱歉，未获取到参数');
    		return;
    	}
    	this.innerText = '正在提交...';
    	submitUser(levelNum,userImpression,billNo,rateIssueOrRob);
    })
});

//评价字数限制
function wordsNumberDeal(){
    let urt = $("#userRateText");
    let curLength = urt.val().length;
    if(curLength > 140) {
        let num = urt.val().substr(0,140);
        urt.val(num);
        alert("超过字数限制，多出的字将被截断！");
    }else{
        $("#textCount").text(140 - curLength);
    }
}
/**
 * 提交用户评价
 * levelNum：评价等级
 userImpression: 评价印象
 billNo ： 是基于哪个服务单的评价
 */
function submitUser(levelNum,userImpression,billNo,rateIssueOrRob) {
	 $.ajax({
		type : "POST",
		url : '/serviceOrder/submitUserRate',
		data : {
			levelNum: levelNum,
			userImpression: userImpression,
			rateText: $("#userRateText").val(),
			billNo: billNo,
			rateIssueOrRob: rateIssueOrRob
		},
		dataType : 'json',
		cache : false,
		async: false,
		success : function(result) {
			if (result == '0') {
				sessionStorage.removeItem('userRateBillNo');
				sessionStorage.removeItem('rateIssueOrRob');
				alert('感谢您的评价！么么哒(* ￣3)(ε￣ *)');
				window.history.back(-1);
			}else if (result == '1') {
				alert('系统获取参数失败，请重试');
			}else if (result == '2') {
				alert('请您登录后再评价噢');
			}else if (result == '3') {
				alert('您不是当前服务单的发布人，不对服务提供者进行评价');
			}else if (result == '4') {
				alert('您不是当前服务单的服务提供者，不对服务发布者进行评价');
			}else if (result == '5') {
				alert('您的评价信息并没有提交成功，请稍候再试');
			}else if (result == '6') {
				alert('您的评价信息保存失败');
			}
			$('#submitUserRate').text('提交评价');
		},
		error: function() {
			alert('系统繁忙，请您稍候再试');
			$('#submitUserRate').text('提交评价');
		}
	});
}
//加载用户印象信息
function loadImpression() {
    let issueOrRob = sessionStorage.getItem('rateIssueOrRob');
    //issueOrRob:0,服务发布者对服务提供/抢单人评价;issueOrRob:1,服务提供方对服务方评价
    let dicId = parseInt(issueOrRob) == 0 ? 67 : 74;
    let impressionArray = getDictionaries(dicId);
    if (isNull(impressionArray)){
        return;
    }
    let impressionLiArr = [];
    for (let g = 0; g < impressionArray.length; g ++){
        let imp = impressionArray[g], cssStr = '';
        if (g == impressionArray.length - 1){
            cssStr = 'style="float:right;margin-right:0px;"';
        }
        impressionLiArr.push('<li class="user-impression" data-impression="' + imp.id + '" ' + cssStr + '>' + imp.dicName + '<i class="iconfont icon-checked"></i></li>');
    }
    $('.impression-list ul').append(impressionLiArr.join(''));
}
</script>
<script type="text/javascript" src="/staticFile/js/common/commonPage.js"></script>
<script type="text/javascript" src="/staticFile/js/common/commonHeaderPage.js"></script>